<template>
  <div
    style="margin-top: 30px; margin-bottom: 30px"
    class="scroll-key-info-container"
    :style="{ backgroundColor: modelValue?.bgColor }"
    @mouseenter="isHover = true"
    @mouseleave="isHover = false"
  >
    <div class="scroll-key-info scrollkey_wrap">
      <div class="scroll-key-info__wrapper">
        <!-- PC端 -->
        <transition name="fade" mode="out-in">
          <div
            class="pc_wrap"
            :key="activeNum"
            :style="{
              position: 'relative',
              height: '100%',
              backgroundPosition: '50%',
              backgroundSize: 'cover',
              backgroundRepeat: 'no-repeat',
              backgroundImage:
                'linear-gradient(180deg, hsla(0, 0%, 100%, 0) 78.25%, #edeef1 83.46%),url(' +
                modelValue?.list?.[activeNum]?.image +
                ')',
            }"
          >
            <div class="middle_content_box">
              <div class="content_wrap">
                <div class="left_content">
                  <h5 class="title">
                    {{ modelValue?.list?.[activeNum]?.title }}
                  </h5>
                  <div class="lable">
                    {{ modelValue?.list?.[activeNum]?.label }}
                  </div>
                </div>
                <div class="right_content">
                  <p class="top_content">
                    <div
                      class="content"
                      v-html="modelValue?.list?.[activeNum]?.content"
                    >
                    </div>
                  </p>
                  <div
                    class="bottom_content"
                    v-if="modelValue?.list?.[activeNum]?.links?.length"
                  >
                    <div
                      class="bottom_item"
                      v-for="i in modelValue?.list?.[activeNum]?.links || []"
                      :key="i"
                    >
                      <!-- 如果链接包含 http 则使用 a 标签跳转 -->
                      <a
                     
                        class="a_style"
                         @click="handleClick(i.url)"
                      >
                        <span class="a_text">{{ i.text }}</span>
                        <span class="circle-link__icon"></span>
                      </a>
                      <!-- 否则使用 button 并 emit handleClick 事件 -->
                      <!-- <button
                        v-else
                        @click="handleClick(i.url)"
                        class="a_style"
                      >
                        <span class="a_text">{{ i.text }}</span>
                        <span class="circle-link__icon"></span>
                      </button> -->
                    </div>
                  </div>
                </div>
              </div>
            </div></div
        ></transition>
        <!-- 中间tab -->
        <div class="scroll-key-info__step-bar d-none d-md-block">
          <div class="step-bar__wrapper container-content">
            <ul class="step-bar__list">
              <li
                @click="handleActive(index, $event)"
                class="step-bar__item"
                v-for="(item, index) in modelValue?.list"
                :class="[activeNum === index ? 'is-active' : '']"
              >
                <div class="step-bar__item__text">{{ item.name }}</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="scroll-key-info__content">
        <div></div>
      </div>
    </div>
    <div class="mobile_wrap">
      <transition name="fade" mode="out-in">
        <div
          class="pc_wrap"
          :key="activeNum"
          :style="{
            position: 'relative',
            height: '100%',
            backgroundPosition: '50%',
            backgroundSize: 'cover',
            backgroundRepeat: 'no-repeat',
            backgroundImage:
              'linear-gradient(180deg, hsla(0, 0%, 100%, 0) 78.25%, #edeef1 83.46%),url(' +
              modelValue?.list?.[activeNum]?.image +
              ')',
          }"
        ></div
      ></transition>
      <div class="tab-primary is-campus" ref="tabContainer">
        <ul class="tab-primary__list">
          <div class="tab-primary__nav__prev" style="display: none"></div>
          <li
            @click="handleActive(index, $event)"
            v-for="(item, index) in modelValue?.list || []"
            class="tab-primary__item"
          >
            <div class="flex-center">
              <div
                class="tab-primary__btn"
                :class="[activeNum === index ? 'is-active' : '']"
              >
                <div>{{ item.name }}</div>
              </div>
            </div>
          </li>
          <div class="tab-primary__nav__next" style="display: none"></div>
        </ul>
        <!-- 滑动下划线 -->
        <span
          class="tab-primary__strip"
          :style="{
            '--strip-width': stripWidth + 'px',
            '--strip-left': stripLeft + 'px',
            '--fix-left': '0px',
          }"
        ></span>
      </div>
      <div class="tab__content__card">
        <h5 class="text-blue-dark">
          {{ modelValue?.list?.[activeNum]?.name }}
        </h5>
        <div class="tx-body-p text-teal-dark mt-1">
          {{ modelValue?.list?.[activeNum]?.label }}
        </div>
        <div class="tab__content__card__content mt-3">
          <p v-html="modelValue?.list?.[activeNum]?.content"></p>
        </div>
        <div class="tab__content__card__link mt-6">
          <div class="circle-link">
            <!-- 如果链接包含 http 则使用 a 标签跳转 -->

            <div
              v-for="i in modelValue?.list?.[activeNum]?.links || []"
              :key="i"
            >
              <template v-if="i.url && i.url.includes('http')">
                <a @click="handleClick(i.url)" class="nuxt-link-active">
                  <div>{{ i.text }}</div>
                  <span class="circle-link__icon"></span>
                </a>
              </template>

              <!-- 否则使用 button 并 emit handleClick 事件 -->
              <template v-else>
                <button
                  @click="handleClick(i.url)"
                  class="nuxt-link-active"
                  :key="i"
                >
                  <div>{{ i.text }}</div>
                  <span class="circle-link__icon"></span>
                </button>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Operate
      v-if="!isPreview"
      v-model:show="isHover"
      @handle-edit="showSetting = true"
      @handle-delete="handleDelete"
      @handle-copy="handleCopy"
      @handle-paste="handlePaste"
    ></Operate>
    <!-- </a-row> -->
  </div>

  <Setting
    v-if="!isPreview"
    v-model:show="showSetting"
    :data="modelValue"
  ></Setting>
</template>

<script lang="ts" setup>
import { computed, nextTick, ref, onMounted } from "vue";
import { randomString } from "@/utils/common";
import Setting from "./setting.vue";
import Operate from "@/common/Operate/index.vue";

// 定义组件名称
defineOptions({
  name: "ScrollKeyInfo",
});

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({ list: [] }),
  },

  // 是否预览
  isPreview: {
    type: Boolean,
    default: false,
  },
});
console.log("!!!!", props.modelValue);
const emit = defineEmits([
  "update:modelValue",
  "handleDelete",
  "handleCopy",
  "handlePaste",
  "handleClick",
]);

const isHover = ref<boolean>(false);
const showSetting = ref<boolean>(false);
const activeNum = ref<number>(0);

const tabContainer = ref(null);
// const activeNum = ref(0)
const stripWidth = ref(0);
const stripLeft = ref(0);

const handleDelete = () => {
  emit("handleDelete", props.modelValue.id);
};

const handleCopy = () => {
  emit("handleCopy", props.modelValue);
};

const handlePaste = (type: string) => {
  emit("handlePaste", type);
};

const handleClick = (url: string) => {
  emit("handleClick", url);
};

const handleInit = () => {
  if (props.modelValue && props.modelValue.list && props.modelValue.list.length) return; // 有数据不用初始化
  const data = {
    id: props.modelValue?.id || randomString(),
    type: "ScrollKeyInfo",
    list: [
      {
        name: "幼儿教育",
        title: "幼儿教育课程",
        image:
          "https://osswebsite-test.cedim.cn/media-library/ywies-tx/pdf/TX%20Brochure%20Cover.png",
        label: "label",
        content: "耀华致力为孩子创造一个沉浸式双语学习的有利环境，透过教师与家长携手合作，培育新一代有自信、爱心及好奇心的幼龄学习者。早期教育强调儿童全人发展、塑造品格与个人及社会价值观，让孩子终身受益。",
        id:randomString(),
        links: [
          {
             id:  randomString(),
            text: "了解更多",
            linkType: "Internal Link",
            url: "https://www.baidu.com",
          },
      
        ],
      },
      {
        name: "小学部",
        title: "title",
        image:
          "https://osswebsite-test.cedim.cn/media-library/ywies-tx/pdf/TX%20Brochure%20Cover.png",
        label: "label",
        content: "耀华致力为孩子创造一个沉浸式双语学习的有利环境，透过教师与家长携手合作，培育新一代有自信、爱心及好奇心的幼龄学习者。早期教育强调儿童全人发展、塑造品格与个人及社会价值观，让孩子终身受益。",
          id:randomString(),
        links: [
          {
            id:  randomString(),
            text: "了解更多",
            linkType: "Internal Link",
            url: "https://www.baidu.com",
          },
   
        ],
      },
      {
        name: "中学部",
        title: "title",
          id:randomString(),
        image:
          "https://osswebsite-test.cedim.cn/media-library/ywies-tx/pdf/TX%20Brochure%20Cover.png",
        label: "label",
        content: "耀华致力为孩子创造一个沉浸式双语学习的有利环境，透过教师与家长携手合作，培育新一代有自信、爱心及好奇心的幼龄学习者。早期教育强调儿童全人发展、塑造品格与个人及社会价值观，让孩子终身受益。",
        links: [
          {
            text: "了解更多",
            linkType: "Internal Link",
            url: "https://www.baidu.com",
            id:  randomString(),
          },
       
        ],
      },
    ],
  };
  emit("update:modelValue", data);
};

const handleActive = (index: number, event: any) => {
  activeNum.value = index;
  updateStripPosition(event);
};

const updateStripPosition = (event: any) => {
  const btn = event.currentTarget.querySelector(".tab-primary__btn");
  const newWidth = btn.offsetWidth;
  const newLeft = btn.offsetLeft;

  const oldWidth = stripWidth.value;
  const oldLeft = stripLeft.value;

  // 1. 先移除过渡（避免第一步突然跳动）
  const stripEl = tabContainer?.value?.querySelector(".tab-primary__strip");
  stripEl.style.transition = "none";

  // 2. 计算蠕动的最大宽度
  const biggerWidth =
    Math.abs(newLeft - oldLeft) + Math.max(newWidth, oldWidth);
  stripLeft.value = Math.min(oldLeft, newLeft);
  stripWidth.value = biggerWidth;

  // 3. 强制触发一次重绘（让浏览器先应用第一步的样式）
  stripEl.offsetHeight; // 访问触发重绘

  // 4. 恢复平滑过渡，并执行第二段动画
  stripEl.style.transition = "left 0.25s ease-in-out, width 0.25s ease-in-out";
  setTimeout(() => {
    stripLeft.value = newLeft;
    stripWidth.value = newWidth;
  }, 260); // 延迟一点点，让第一步显示出来
};
onMounted(() => {
  nextTick(() => {
    // const firstTab =
    //   tabContainer?.value?.querySelectorAll(".tab-primary__item")[0];
    // updateStripPosition(firstTab);
    const firstTab =
      tabContainer?.value?.querySelectorAll(".tab-primary__item")?.[0];
    if (firstTab) {
      const btn = firstTab.querySelector(".tab-primary__btn");
      if (btn) {
        stripWidth.value = btn.offsetWidth;
        stripLeft.value = btn.offsetLeft;
      }
    }
  });
});
handleInit();
</script>

<style lang="scss" scoped>
/* 让 button 看起来像链接 */
.a_style button,
.circle-link button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font: inherit;
  width: 100%;
  text-align: left;
}

.tab__content__card {
  padding: 40px 12px;
}
.circle-link {
  display: flex;
}
.nuxt-link-active {
  display: flex;
  align-items: center;
  margin-right: 16px;
  cursor: pointer;
}
.mobile_wrap {
  display: none;
  height: 188px;
}
@media screen and (max-width: 768px) {
  .scrollkey_wrap {
    display: none;
  }
  .mobile_wrap {
    display: block;
  }
}
@media screen and (max-width: 480px) {
  .scrollkey_wrap {
    display: none;
  }
  .mobile_wrap {
    display: block;
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0.5;
}

.circle-link__icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #172386;
  position: relative;
  margin-left: 7px;
  flex-shrink: 0;
  display: inline-block;
  &::before {
    content: "";
    width: 6px;
    height: 9px;
    position: absolute;
    top: 50%;
    left: 55%;
    background-image: url();
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: hsla(0, 0%, 100%, 0);
    transform: translate(-260%, -50%);
    transition: transform 0.3s ease-in-out;
  }
  &::after {
    content: "";
    width: 6px;
    height: 9px;
    position: absolute;
    top: 50%;
    left: 55%;
    background-image: url();
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: hsla(0, 0%, 100%, 0);
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease-in-out;
  }
}
.middle_content_box {
  --max-width: 952px;
  padding-left: 36px;
  padding-right: 36px;
  margin: 0 auto;
  max-width: calc(var(--max-width) + 72px);
  .content_wrap {
    position: relative;
    background: hsla(0, 0%, 100%, 0.75);
    padding: 14px 10px 14px 37px;
    border-radius: 0 0 8px 8px;
    display: flex;
    .left_content {
      margin-right: 36px !important;
      .title {
        font-size:20px;
        color: var(--text-color--primary, #0032a0) !important;
        white-space: nowrap;
      }
      .lable {
        margin-top: 4px !important;
        color: rgba(var(--bs-teal-dark-rgb), var(--bs-text-opacity)) !important;
      }
    }
    .right_content {
      .top_content {
        margin-bottom: 12px;
        .content {
          color: #1a1c20;
        }
      }
      .bottom_content {
        display: flex;

        .bottom_item {
          text-align: center;
          display: flex;
          align-items: center;
          margin-right: 24px;
          cursor: pointer;
          .a_text {
            color: #172386 !important;
          }
          .a_style {
            display: inline-block;
            display: flex;
            align-items: center;
          }
          &:hover {
            .circle-link__icon {
              &::before {
                transform: translate(-50%, -50%) !important;
              }
              &::after {
                transform: translate(150%, -50%) !important;
              }
            }
          }
        }
      }
    }
  }
}
.red_border {
  border: 1px solid red;
}
.scroll-key-info-container {
  position: relative;
}
.scroll-key-info__wrapper {
  height: 439px;
  position: relative;
}
.pc_wrap {
  width: 100%;
  height: 439px;
}

@media (max-width: 767.98px) {
  .scroll-key-info__wrapper {
    height: auto;
    min-height: 188px;
  }
}

.scroll-key-info .swiper .swiper-wrapper .swiper-slide {
  height: 439px;
}

@media (max-width: 767.98px) {
  .scroll-key-info .swiper .swiper-wrapper .swiper-slide {
    height: 188px;
  }
}

.scroll-key-info .swiper .swiper-wrapper .swiper-slide .slide-body {
  position: relative;
  height: 100%;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: linear-gradient(
      180deg,
      hsla(0, 0%, 100%, 0) 78.25%,
      #edeef1 83.46%
    ),
    var(--bg-image);
}

@media (max-width: 767.98px) {
  .scroll-key-info .swiper .swiper-wrapper .swiper-slide .slide-body {
    background-image: linear-gradient(
        180deg,
        hsla(0, 0%, 100%, 0) 83.33%,
        #edeef1 92.71%
      ),
      var(--bg-image);
  }
}

.scroll-key-info .swiper .swiper-wrapper .swiper-slide .slide-body__content {
  position: relative;
  background: hsla(0, 0%, 100%, 0.75);
  padding: 14px 10px 14px 37px;
  border-radius: 0 0 8px 8px;
}

.scroll-key-info
  .swiper
  .swiper-wrapper
  .swiper-slide
  .slide-body__content__content {
  color: #1a1c20;
}

.scroll-key-info
  .swiper
  .swiper-wrapper
  .swiper-slide
  .slide-body__content__content
  > p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: #1a1c20;
}

@media (max-width: 1023.98px) {
  .scroll-key-info
    .swiper
    .swiper-wrapper
    .swiper-slide
    .slide-body__content__content
    > p {
    font-size: 14px;
    line-height: 1.714;
    letter-spacing: 0.01em;
  }
}

.scroll-key-info
  .swiper
  .swiper-wrapper
  .swiper-slide
  .slide-body__content__content
  > p
  > b,
.scroll-key-info
  .swiper
  .swiper-wrapper
  .swiper-slide
  .slide-body__content__content
  > p
  > strong {
  font-weight: 700;
}

.scroll-key-info
  .swiper
  .swiper-wrapper
  .swiper-slide
  .slide-body__content__link {
  display: flex;
  align-items: center;
}

.scroll-key-info
  .swiper
  .swiper-wrapper
  .swiper-slide
  .slide-body__content__link
  > :not(:first-child) {
  margin-left: 24px;
}

.scroll-key-info__step-bar {
  position: absolute;
  bottom: 25.52px;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
}

.scroll-key-info__step-bar .step-bar__list {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
}

.scroll-key-info__step-bar .step-bar__list .step-bar__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #0032a0;
  opacity: 0.4;
  cursor: pointer;
  transition: color 0.3s ease-in-out;
}

.scroll-key-info__step-bar .step-bar__list .step-bar__item.is-active {
  opacity: 1;
}

.scroll-key-info__step-bar .step-bar__list .step-bar__item:not(:first-child) {
  padding-left: 12px;
}

.scroll-key-info__step-bar
  .step-bar__list
  .step-bar__item:not(:first-child):before {
  content: "";
  width: 20px;
  height: 2px;
  flex-shrink: 0;
  background-color: #1531b2;
  margin-right: 10px;
  margin-bottom: 4px;
  transition: width 0.3s ease-in-out, margin-right 0.3s ease-in-out;
}

.scroll-key-info__step-bar
  .step-bar__list
  .step-bar__item:not(:first-child).is-active:before {
  width: 24px;
  height: 24px;
  background-color: transparent;
  background: url()
    50% no-repeat;
  background-size: 100% auto;
  margin-right: 5px;
}

.scroll-key-info__step-bar .step-bar__list .step-bar__item__text {
  display: flex;
  flex-direction: column;
  --text-color: #0032a0;
  color: #0032a0;
  color: var(--text-color, #0032a0);
}

.scroll-key-info__step-bar .step-bar__list .step-bar__item__text:after {
  content: "";
  width: 100%;
  height: 1px;
  margin-top: 4px;
  border-radius: 1px;
  background-color: #0032a0;
  background-color: var(--text-color, #0032a0);
  transform: scaleX(0);
  transition: all 0.15s ease-in;
}

.scroll-key-info__step-bar
  .step-bar__list
  .step-bar__item:hover
  .step-bar__item__text:after {
  transform: scaleX(1);
}

.scroll-key-info__tab__content .fade-enter-active,
.scroll-key-info__tab__content .fade-leave-active {
  transition: opacity 0.25s ease-out;
}

.scroll-key-info__tab__content .fade-enter,
.scroll-key-info__tab__content .fade-leave-to {
  opacity: 0;
}

.scroll-key-info__tab__content .fade-enter-to,
.scroll-key-info__tab__content .fade-leave {
  opacity: 1;
}

.scroll-key-info__tab__content .tab__content__card__content {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: #000;
}

@media (max-width: 1023.98px) {
  .scroll-key-info__tab__content .tab__content__card__content {
    font-size: 14px;
    line-height: 1.714;
    letter-spacing: 0.01em;
  }
}

.scroll-key-info__tab__content .tab__content__card__content p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: #000;
}

@media (max-width: 1023.98px) {
  .scroll-key-info__tab__content .tab__content__card__content p {
    font-size: 14px;
    line-height: 1.714;
    letter-spacing: 0.01em;
  }
}

.scroll-key-info__tab__content .tab__content__card__content b,
.scroll-key-info__tab__content .tab__content__card__content strong {
  font-weight: 700;
}

.scroll-key-info__tab__content .tab__content__card__link {
  display: flex;
  align-items: center;
}

.scroll-key-info__tab__content .tab__content__card__link > :not(:first-child) {
  margin-left: 16px;
}

.scroll-key-info__content .fade-enter-active,
.scroll-key-info__content .fade-leave-active {
  transition: opacity 0.25s ease-out;
}

.scroll-key-info__content .fade-enter,
.scroll-key-info__content .fade-leave-to {
  opacity: 0;
}

.scroll-key-info__content .fade-enter-to,
.scroll-key-info__content .fade-leave {
  opacity: 1;
}

.tab-primary {
  display: flex;
  justify-content: center;
  --max-width: 1128px;
  max-width: calc(var(--max-width) + 72px);
  margin: 0 auto;
  position: relative;
  background-color: #fff;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 0 10px 0 rgba(130, 130, 140, 0.12);
  padding: 0 36px;
}

@media (max-width: 1023.98px) {
  .tab-primary {
    padding-left: 24px;
    padding-right: 24px;
    max-width: calc(var(--max-width) + 48px);
  }
}

@media (max-width: 767.98px) {
  .tab-primary {
    padding-left: 12px;
    padding-right: 12px;
    max-width: calc(var(--max-width) + 24px);
  }
}

@media (max-width: 575.98px) {
  .tab-primary {
    padding-left: 12px;
    padding-right: 12px;
    max-width: calc(var(--max-width) + 24px);
  }
}

@media (min-width: 1024px) {
  .tab-primary {
    overflow-x: hidden;
  }
}

.tab-primary.is-full-width {
  max-width: 100%;
}

.tab-primary__list {
  display: flex;
  align-items: center;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-color: transparent;
  scrollbar-width: none;
}

.tab-primary__list::-webkit-scrollbar-track {
  border-radius: 0;
  background-color: transparent;
}

.tab-primary__list::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

.tab-primary__list::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-color: transparent;
}

.tab-primary__item {
  display: flex;
}

.tab-primary__item:not(:first-of-type) {
  margin-left: 40px;
}

@media (max-width: 1023.98px) {
  .tab-primary__item:not(:first-of-type) {
    margin-left: 24px;
  }
}

@media (max-width: 767.98px) {
  .tab-primary__item:not(:first-of-type) {
    margin-left: 20px;
  }
}

@media (max-width: 767.98px) {
  .tab-primary__item:not(:first-of-type).is-img {
    margin-left: 16px;
  }
}

.tab-primary__item.is-img {
  height: 82px;
}

@media (max-width: 1023.98px) {
  .tab-primary__item.is-img {
    height: 63px;
  }
}

.tab-primary__item.is-img .tab-primary__btn {
  padding: 14px 0 5px;
  transition: opacity 0.3s ease-in-out;
}

@media (max-width: 1023.98px) {
  .tab-primary__item.is-img .tab-primary__btn {
    padding: 10px 0 1px;
  }
}

.tab-primary__btn {
  width: auto;
  border: none !important;
  background: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #1a1c20;
  text-decoration: none;
  padding: 24px 0 20px;
  transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 0.7;
  cursor: pointer;
}

@media (max-width: 1023.98px) {
  .tab-primary__btn {
    font-size: 14px;
    line-height: 1.285;
    letter-spacing: 0.01em;
    padding: 18.5px 0 13.5px;
  }
}

@media (max-width: 767.98px) {
  .tab-primary__btn {
    padding: 10px 0;
  }
}

.tab-primary__btn.is-active {
  color: #0048e8;
  color: var(--tab-color, #0048e8);
  opacity: 1;
}

.tab-primary__btn:hover:not(.is-active) {
  opacity: 1;
}

.tab-primary__btn__img {
  height: 63px;
  width: auto;
}

@media (max-width: 1023.98px) {
  .tab-primary__btn__img {
    height: 50px;
  }
}

.tab-primary__btn__img img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.tab-primary__strip {
  position: absolute;
  width: 0;
  width: var(--strip-width, 0);
  height: 4px;
  background: #0048e8;
  background: var(--tab-color, #0048e8);
  bottom: 0;
  left: 0;
  left: calc(var(--strip-left, 0) - var(--fix-left, 0));
}

@media (max-width: 1023.98px) {
  .tab-primary__strip {
    height: 2px;
  }
}

@media (max-width: 767.98px) {
  .tab-primary__strip {
    height: 4px;
  }
}

.tab-primary.is-fixed {
  max-width: 100vw;
  box-shadow: none;
}

.tab-primary__nav__next,
.tab-primary__nav__prev {
  position: absolute;
  width: 33px;
  height: 100%;
  box-shadow: 0 -8px 12px rgba(0, 0, 0, 0.22);
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  cursor: pointer;
}

@media (max-width: 1023.98px) {
  .tab-primary__nav__next,
  .tab-primary__nav__prev {
    width: 28px;
  }
}

@media (max-width: 767.98px) {
  .tab-primary__nav__next,
  .tab-primary__nav__prev {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.22);
  }
}

.tab-primary__nav__next:after,
.tab-primary__nav__prev:after {
  content: "";
  width: 24px;
  height: 24px;
  background-image: url();
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: hsla(0, 0%, 100%, 0);
}

@media (max-width: 1023.98px) {
  .tab-primary__nav__next:after,
  .tab-primary__nav__prev:after {
    width: 14px;
    height: 14px;
  }
}

.tab-primary__nav__prev {
  left: -1px;
}

.tab-primary__nav__prev:after {
  transform: scale(-1);
}

.tab-primary__nav__next {
  right: -1px;
}

.link-list__container {
  display: flex;
  align-items: center;
}

.link-list__item:not(:first-child) {
  margin-left: 40px;
}

@media (max-width: 767.98px) {
  .link-list__item:not(:first-child) {
    margin-left: 24px;
  }
}

.link-list.center .link-list__container {
  justify-content: center;
}

.text-link[data-v-51351f95] {
  display: flex;
}

.text-link__wrapper[data-v-51351f95] {
  background: none;
  padding: 0;
  border: none;
  --text-color: #0032a0;
}

.text-link--light .text-link__wrapper[data-v-51351f95] {
  --text-color: #fff;
}

parallax-bg.swiper-container {
  overflow: unset;
}

.fade-enter-activeparallax-bg,
.fade-leave-activeparallax-bg {
  transition: opacity 0.5s, transform 0.3s 0.2s;
}

.fade-enterparallax-bg,
.fade-leave-activeparallax-bg {
  opacity: 0;
  transform: scale(0);
}

.tipFade-enter-activeparallax-bg,
.tipFade-leave-activeparallax-bg {
  transition: opacity 0.3s;
}

.tipFade-enterparallax-bg,
.tipFade-leave-activeparallax-bg {
  opacity: 0;
}

.animation-icon-effectparallax-bg {
  -webkit-animation-play-state: running !important;
  animation-play-state: running !important;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-name: iconEffectScale-data-v-70545fd0;
  animation-name: iconEffectScale-data-v-70545fd0;
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
}

@-webkit-keyframes iconEffectScale-data-v-70545fd0 {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
  }

  70% {
    opacity: 1;
  }

  to {
    opacity: 0;
    width: 100px;
    height: 100px;
  }
}

@keyframes iconEffectScale-data-v-70545fd0 {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
  }

  70% {
    opacity: 1;
  }

  to {
    opacity: 0;
    width: 100px;
    height: 100px;
  }
}

.swiperparallax-bg {
  width: 100%;
  height: 100%;
  background: #456ce5;
  position: relative;
}

.swiper-slideparallax-bg {
  font-size: 18px;
  color: #fff;
  box-sizing: border-box;
}

.parallax-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 130%;
  height: 102%;
  background-size: cover;
  background-position: 50%;
  background-image: url("https://ywies-tx.cedim.cn/_nuxt/img/home-history-banner.dac7153.png");
}

@media (max-width: 575.98px) {
  .parallax-bg {
    width: 2230px;
  }
}

.swiper-slide .periodparallax-bg {
  width: inherit;
  z-index: 100;
  position: relative;
  display: inline-block;
  left: calc(50% - 66px);
}

.swiper-slide .period pparallax-bg {
  display: inline-block;
  font-size: 50px;
  font-weight: 900;
  line-height: 59.4px;
  letter-spacing: 0.1em;
  z-index: 10;
  position: relative;
}

.swiper-slide .period__iconPlusparallax-bg {
  position: absolute;
  top: -4px;
  left: 122px;
  cursor: pointer;
  z-index: 10;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-slide .period__effectparallax-bg {
  position: absolute;
  top: 18px;
  left: 143px;
  width: 20px;
  height: 20px;
}

.swiper-slide .period__effect__circleparallax-bg {
  border-radius: 50%;
  position: absolute;
  border: 4px solid #fff;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.swipe-tipparallax-bg {
  position: absolute;
  margin-top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 4px;
  padding: 4px 8px;
  box-shadow: 0 8px 32px rgba(130, 130, 140, 0.24);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 280px;
  cursor: pointer;
  display: none;
  z-index: 4;
}

@media (max-width: 575.98px) {
  .swipe-tipparallax-bg {
    display: flex;
  }
}

.swipe-tip pparallax-bg {
  color: #64788f;
}

.swipe-tip .iocn-tipparallax-bg {
  -webkit-animation-name: moveRotate-data-v-70545fd0;
  animation-name: moveRotate-data-v-70545fd0;
  -webkit-animation-duration: 1.8s;
  animation-duration: 1.8s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes moveRotate-data-v-70545fd0 {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(20deg);
  }

  75% {
    transform: rotate(-20deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes moveRotate-data-v-70545fd0 {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(20deg);
  }

  75% {
    transform: rotate(-20deg);
  }

  to {
    transform: rotate(0deg);
  }
}

.slide-boxparallax-bg {
  height: 390px;
  max-height: 390px;
  display: flex;
  justify-content: center;
  min-height: 360px;
}

@media (max-width: 1230px) {
  .slide-boxparallax-bg {
    padding-top: 60px;
    height: auto;
  }
}

@media (max-width: 1279.98px) {
  .slide-boxparallax-bg {
    justify-content: space-around !important;
  }
}

.slide-box .hisPopupparallax-bg {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
}

.slide-box .inside-wrapparallax-bg {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transform: translateY(3px);
  width: 40%;
}

@media (max-width: 767.98px) {
  .slide-box .inside-wrapparallax-bg {
    min-width: 300px;
  }
}

@media (max-width: 630px) {
  .slide-box .inside-wrapparallax-bg {
    min-width: 272px;
  }
}

@media (max-width: 575.98px) {
  .slide-box .inside-wrapparallax-bg {
    width: 90%;
  }
}

@media (max-width: 375px) {
  .slide-box .inside-wrapparallax-bg {
    width: 100%;
  }
}

.slide-box .imageparallax-bg {
  height: 64%;
}

@media (max-width: 1230px) {
  .slide-box .imageparallax-bg {
    position: relative;
  }
}

@media (max-width: 860px) {
  .slide-box .imageparallax-bg {
    height: 56%;
  }
}

@media (max-width: 640px) {
  .slide-box .imageparallax-bg {
    height: 52%;
  }
}

@media (max-width: 575.98px) {
  .slide-box .imageparallax-bg {
    display: flex;
    justify-content: center;
  }
}

.slide-box .image imgparallax-bg {
  height: 100%;
  margin: auto;
  display: block;
  width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  max-width: 450px;
}

@media (max-width: 575.98px) {
  .slide-box .image imgparallax-bg {
    padding: 0 15px;
  }
}

@media (max-width: 575.98px) {
  .closeRightSideparallax-bg {
    display: none !important;
  }
}

.swiper-bottomparallax-bg {
  position: relative;
  z-index: 1;
  height: 100%;
  background-color: #001e60;
  padding: 27px 0;
}

.swiper-bottom__textparallax-bg {
  color: #fff !important;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 100%;
  position: relative;
}
</style>
